<template>
  <el-card shadow="never">
    <template #header>
      <slot name="header"></slot>
    </template>
    <el-descriptions border :column="column">
      <el-descriptions-item
        label="寄存数量"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >X</el-descriptions-item
      >
      <el-descriptions-item
        label="价值"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        :span="2"
        >X元</el-descriptions-item
      >
      <el-descriptions-item
        label="累计服务"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >X次</el-descriptions-item
      >
      <el-descriptions-item
        label="平均单次服务"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >x个项目</el-descriptions-item
      >
      <el-descriptions-item
        label="月均到店"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >X次</el-descriptions-item
      >
      <el-descriptions-item
        label="平均消耗业绩"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >x元/次</el-descriptions-item
      >
      <el-descriptions-item
        label="累计预约"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >X次</el-descriptions-item
      >
      <el-descriptions-item
        label="赴约率"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >X%
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import * as UserApi from '@/api/member/user'

const { user } = defineProps<{ user: UserApi.UserVO }>()
import { useHook } from './hook'
const { matchMedia } = useHook()
const column = ref(6)
const matchType = ref('xl')
const labelWidth = ref(80)

const setColumn = () => {
  const type = matchMedia()
  matchType.value = type
  if (type == 'xs') {
    column.value = 1
    labelWidth.value = 80
  } else if (type == 'sm') {
    column.value = 3
    labelWidth.value = 80
  } else if (type == 'md') {
    column.value = 3
    labelWidth.value = 80
  } else if (type == 'lg') {
    column.value = 3
    labelWidth.value = 150
  } else if (type == 'xl') {
    column.value = 3
    labelWidth.value = 80
  }
}
window.onresize = () => {
  setColumn()
}
onMounted(() => {
  setColumn()
})
</script>
